<script lang="ts" setup>
import { ref, onMounted, nextTick, reactive, toRefs } from "vue"
// import { ref, reactive, toRefs } from "vue"
import "@/utils/rem"
import FingerprintJS from "@fingerprintjs/fingerprintjs"
import { postMsg } from "@/api/advice"
import { showToast } from "vant"
const fingerprintId = ref<any>()
const data = reactive<any>({
  formData: {}
})
const { formData } = toRefs(data)
const showPicker = ref<boolean>(false)
const show = ref<boolean>(false)
const columns = ref<any>([
  { text: "求助", value: "求助" },
  { text: "咨询", value: "咨询" },
  { text: "投诉", value: "投诉" },
  { text: "建议", value: "建议" },
  { text: "其它", value: "其它" }
])
const onConfirm = ({ selectedOptions }: any) => {
  formData.value.types = selectedOptions[0]?.text
  showPicker.value = false
}
const getDeviceFingerprint = async () => {
  document.title = "凡思特驿站"
  const fpPromise = await FingerprintJS.load({ debug: false })
  // 调用FingerprintJS.load()返回一个Promise对象，用于加载和初始化FingerprintJS库。
  // 可给FingerprintJS.load()传参{debug: true}开启调试模式
  const result = await fpPromise.get()
  // 调用fpPromise.get()获取访问者指纹信息，并返回一个包含指纹ID和其他信息的结果对象。
  //高熵值的指纹可以增加设备的识别率，但却会导致设备指纹频繁变化，从而引起用户频繁掉线，最终影响用户体验。实际上我们不需要那么精确的区分浏览器，排除以下模块生成指纹
  const {
    audioBaseLatency,
    colorGamut,
    contrast,
    cookiesEnabled,
    deviceMemory,
    domBlockers,
    fontPreferences,
    fonts,
    forcedColors,
    hardwareConcurrency,
    hdr,
    indexedDB,
    invertedColors,
    languages,
    localStorage,
    math,
    monochrome,
    openDatabase,
    pdfViewerEnabled,
    plugins,
    privateClickMeasurement,
    reducedMotion,
    reducedTransparency,
    screenFrame,
    screenResolution,
    sessionStorage,
    vendor,
    vendorFlavors,
    webGlBasics,
    webGlExtensions,
    ...components
  } = result.components
  console.log(
    webGlExtensions,
    webGlBasics,
    vendorFlavors,
    vendor,
    sessionStorage,
    screenResolution,
    screenFrame,
    reducedTransparency,
    reducedMotion,
    audioBaseLatency,
    colorGamut,
    contrast,
    cookiesEnabled,
    deviceMemory,
    domBlockers,
    fontPreferences,
    fonts,
    forcedColors,
    hardwareConcurrency,
    hdr,
    indexedDB,
    invertedColors,
    languages,
    localStorage,
    math,
    monochrome,
    openDatabase,
    pdfViewerEnabled,
    plugins,
    privateClickMeasurement
  )
  const extendedComponents = ref<any>({
    ...components,
    foo: { value: "advice" }
  })
  fingerprintId.value = FingerprintJS.hashComponents(extendedComponents.value)
  // console.log("result components:", extendedComponents.value)
}
getDeviceFingerprint()
const timer = ref<any>(null)
const onSubmit = (values: any) => {
  console.log("submit", values)

  postMsg({ ...formData.value, ident: fingerprintId.value }).then((res: any) => {
    if (res.code == 200) {
      show.value = true
      if (timer.value) {
        clearTimeout(timer.value)
      }

      timer.value = setTimeout(() => {
        show.value = false
        formData.value = {}
        showToast("谢谢您的宝贵意见,共同见证公司成长！")
      }, 4500)
    } else {
      showToast(res.data)
    }
  })
}
const bgRef = ref<any>(null)
onMounted(() => {
  nextTick(() => {
    window.scrollTo({ top: bgRef.value.scrollHeight, behavior: "smooth" })
  })
})
</script>

<template>
  <div class="bg" ref="bgRef">
    <van-form @submit="onSubmit" style="padding-top: 5.5rem">
      <van-cell-group inset>
        <van-field
          v-model="formData.types"
          is-link
          readonly
          name="picker"
          label="类型"
          placeholder="点击选择类型"
          @click="showPicker = true"
          :rules="[{ required: true, message: '请选择类型' }]"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
        <van-field
          v-model="formData.title"
          autosize
          label="标题"
          maxlength="50"
          placeholder="请输入"
          show-word-limit
          :rules="[{ required: true, message: '请填写标题' }]"
        />
        <van-field
          v-model="formData.contents"
          rows="7"
          autosize
          label="内容"
          type="textarea"
          maxlength="200"
          placeholder="请输入留言"
          show-word-limit
          :rules="[{ required: true, message: '请填写反馈内容' }]"
        />
      </van-cell-group>
      <div
        style="position: fixed; bottom: 0; width: 7.5rem; left: 50%; margin-left: -3.75rem; border-radius: 0 !important"
      >
        <van-button block type="success" native-type="submit" style="font-size: 18px; font-weight: 700">
          提 交
        </van-button>
      </div>
    </van-form>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-image width="200" height="200" src="http://fansitexitong.cn/images/post.gif" />
        </div>
      </div>
    </van-overlay>
    <van-button type="success" round class="orderSearch" size="mini" :to="`/adviceSearch?id=${fingerprintId}`">
      我的反馈
    </van-button>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  width: 7.5rem;
  height: 16.2rem;
  margin: 0 auto;
  background-image: url("http://fansitexitong.cn/images/advicebg.jpg");
  background-size: 100% 100%;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.orderSearch {
  position: fixed;
  padding: 0.24rem 0.3rem;
  // padding-right: 0.2rem;
  top: 1rem;
  right: -0.2rem;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  border: 0;
  font-size: 14px;
  font-weight: 700;
}
</style>
